<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="../kuangwei/css/zhuce.css" />
</head>

<body>
  <div class="zhuce">
    <div class="left">
      <div>
        <p>手机号码<span class="xingh">*</span></p>

        <div class="input1">
          <input type="text" placeholder="135xxxx3333" id="username" />
        </div>
        <span class="xgys"></span>
      </div>
      <div>
        <div>
          <p>输入密码 <span class="xingh">*</span></p>

          <div class="input2">
            <input type="text" placeholder="密码至少为八位数字字母字符" id="userpass" />
          </div>
          <span class="xgys"></span>
        </div>
      </div>
      <div>
        <p>验证码<span class="xingh">*</span></p>

        <div>
          <input type="text" placeholder="请输入验证码" />
          <span class="hyz"></span>
        </div>
        <span class="xgys"></span>

        <a href="#" onclick="randomCode()" class="kbq">看不清</a>
      </div>
    </div>

    <div class="center">
      <div>
        <p>邮箱<span class="xingh">*</span></p>

        <div class="input3">
          <input type="text" placeholder="example@converse.com" />
        </div>
        <span class="xgys"></span>
      </div>
      <div>
        <div>
          <p>确认密码<span class="xingh">*</span></p>

          <div class="input4">
            <input type="text" placeholder="请再次输入密码" />
          </div>
          <span class="xgys"></span>
        </div>
      </div>
      <div>
        <p>短信验证码<span class="xingh">*</span></p>

        <div class="hz">
          <div>
            <input type="text" />
          </div>

          <div class="yzm">
            <p>发送短信验证码</p>
          </div>
        </div>
        <span class="xgys"></span>
      </div>
    </div>

    <div class="right">
      <div>
        <p>性别<span class="xingh">*</span></p>
        <div>
          <input type="radio" name="sex" checked />
          <span>男的</span>
          <input type="radio" name="sex" />
          <span>女的</span>
        </div>
      </div>
      <div>
        <p>生日 (年-月-日)<span class="xingh">*</span></p>
        <div class="xiala">
          <select name="" style="width: 70px; font-size: 16px">
            <option value="">2022</option>
            <option value="">2021</option>
            <option value="">2020</option>
            <option value="">2019</option>
            <option value="">2018</option>
            <option value="">2017</option>
            <option value="">2016</option>
            <option value="">2015</option>
            <option value="">2014</option>
            <option value="">2013</option>
            <option value="">2012</option>
            <option value="">2011</option>
            <option value="">2010</option>
            <option value="">2009</option>
            <option value="">2008</option>
            <option value="">2007</option>
          </select>
          <select name="" style="width: 70px; font-size: 16px">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
            <option value="">10</option>
            <option value="">11</option>
            <option value="">12</option>
          </select>
          <select name="" style="width: 70px; font-size: 16px">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
            <option value="">7</option>
            <option value="">8</option>
            <option value="">9</option>
            <option value="">10</option>
            <option value="">11</option>
            <option value="">12</option>
            <option value="">13</option>
            <option value="">14</option>
            <option value="">15</option>
            <option value="">16</option>
          </select>
        </div>
      </div>
      <div>
        <input type="checkbox" />
        <span>一旦创建账户，即表明您同意匡威更新的隐私政策和使用规则</span>
        <div class="zczh">
          <p>注册账户</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<!-- <script src="../kuangwei/js/zhuce.js"></script> -->
<!-- <script src="./js/zhuce.js"></script> -->

<script src="../../js/jquery-3.2.1.min.js"></script>

<script>
  let oInput = document.querySelectorAll("input");
  let oSpan = document.querySelectorAll("span");

  let oYzm = document.querySelector(".yzm");

  let oZczh = document.querySelector(".zczh");
  console.log(oZczh);
  console.log(oInput);
  console.log(oSpan);

  oYzm.onclick = function () {
    oSpan[1].innerHTML = "请输入11位有效中国手机号码";
  };

  // 点击注册让手机号和密码是正确的
  oZczh.onclick = function () {
    if (flagPhone == true && flagPassword == true) {
      let xhr = new XMLHttpRequest();
      xhr.open("post", "../../addUser.php", true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(`username=${oInput[0].value}&userpass=${oInput[1].value}`);
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          fun(xhr.responseText);
        }
      };
    } else {
      alert("请输入正确的格式")
    }
  }
  function fun(text) {
    console.log(text);
  }

  // 输入手机号码
  let flagPhone = false;
  oInput[0].onblur = function () {
    let regPhone = /^1[3|4|5|7|8][0-9]{9}$/;
    if (regPhone.test(this.value)) {
      flagPhone = true;
      oSpan[1].innerHTML = "输入正确";
    } else {
      flagPhone = false;
      oSpan[1].innerHTML = "请输入11位有效中国手机号码";
    }
    console.log(flagPhone);
  };

  // 输入邮箱

  let flagEm = false;
  oInput[3].onblur = function () {
    let regEm =
      /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/;
    if (regEm.test(this.value)) {
      oSpan[8].innerHTML = "格式正确";
      flagEm = true;
    } else {
      oSpan[8].innerHTML = "请输入有效的电子邮箱地址";
      flagEm = false;
    }
    console.log(flagEm);
  };

  // 输入密码（8-12位数字字母组合）

  let flagPassword = false;
  oInput[1].onblur = function () {
    let regPassword = /^[A-Za-z0-9]{8,12}$/;
    if (regPassword.test(this.value)) {
      oSpan[3].innerHTML = "格式正确";
      flagPassword = true;
    } else {
      oSpan[3].innerHTML = "格式错误";
      flagPassword = false;
    }
    console.log(flagPassword);
  };

  // 请再次输入密码
  let flagPy = false;
  oInput[4].onblur = function () {
    if (this.value == oInput[1].value && this.value != "") {
      oSpan[10].innerHTML = "密码正确";
      flagPy = true;
    } else {
      oSpan[10].innerHTML = "抱歉，两次输入的密码不匹配";
      flagPy = false;
    }
    console.log(flagPy);
  };

  // 请输入随机验证码
  function rand(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  }
  var num = "";
  var str = "0123456789abcdef";
  for (var i = 0; i < 4; i++) {
    num += str.charAt(rand(0, 15));
  }
  oSpan[5].innerHTML = num;

  function randomCode() {
    var num = "";
    var str = "0123456789abcdef";
    for (var i = 0; i < 4; i++) {
      num += str.charAt(rand(0, 15));
    }
    console.log(num);
    oSpan[5].innerHTML = num;
  }

  oSpan[5].onclick;

  let flagYz = false;
  oInput[2].onblur = function () {
    if (oInput[2].value == oSpan[5].innerHTML) {
      flagYz = true;
    } else {
      oSpan[6].innerHTML = "验证码错误";
      flagYz = false;
    }
    console.log(flagYz);
  };

  // 请输入短信验证码
  let flagTele = false;
  oInput[5].onblur = function () {
    let regTele = /^[0-9]{6}/;
    if (regTele.test(this.value)) {
      flagTele = true;
      oSpan[12].innerHTML = "输入正确";
    } else {
      flagTele = false;
      oSpan[12].innerHTML = "请输入短信验证码";
    }
    console.log(flagTele);
  };




  // 一、先做前端的表单验证
  //功能：所有前端的验证；
  function isTest() {
    return isUserName() && isPass();
    console.log("1")

  }

  //1、用户名的前端验证
  function isUserName() {
    //1)、非空判断
    if ($("#username").val() == "") {
      return false;
      console.log("2")
    }
    //2)、格式判断
    // 用户名有数字，字母下划线组成，但不能以数字开头，2-10位
    // let reg = /^[a-zA-Z_]\w{1,9}$/;
    let reg = /^1[3|4|5|7|8][0-9]{9}$/;
    if (!reg.test($("#username").val())) {
      return false;
      console.log("2")

    }
    return true;
    console.log("4")

  }


  //2、密码的前端验证
  function isPass() {
    //1)、非空判断
    if ($("#userpass").val() == "") {
      return false;
      console.log("5")

    }
    //2)、格式判断
    // 数字，6-16位
    // let reg = /^\d{6,16}$/;
    let reg = /^[A-Za-z0-9]{8,12}$/;
    if (!reg.test($("#userpass").val())) {
      return false;
      console.log("6")

    }
    return true;
    console.log("7")

  }


  //二、后端验证
  let hasUser = false;//该用户名不存在
  function hasUserBack() {
    //后端验证用户名是否存在
    // $.get("checkUser.php",{"username":$("#username").val()},function(data){
    $.get("../../checkUser.php", { "username": $("#username").val() }, function (data) {
      if (data == "0") {
        console.log("8")

        // $("#showUser").html("亲，该用户名已经存在，请重新思考！");
        // $("#showUser").css({"color":"red"});
        hasUser = true;
      } else {
        // $("#showUser").html("亲，该用户名可以使用，赶紧注册吧！");
        // $("#showUser").css({"color":"green"});
        hasUser = false;
        console.log("9")

      }
    })
  }

  $(function () {
    $("#username").blur(function () {
      //1、前端验证
      if (isUserName() == false) {
        console.log("10")

        // $("#showUser").html("亲，用户名的格式不正确！");
        return;
      }
      //2、后端的验证
      hasUserBack();
    });

    $("#userpass").blur(function () {
      //1、前端验证
      if (isPass() == false) {
        console.log("11")

        // $("#showPass").html("亲，密码格式不正确	！");
        return;
      } else {
        console.log("12")

        $("#showPass").html("√");
      }
    });

    $("#btnReg").click(function () {
      //1、前端验证
      if (isTest() == false) {
        console.log("13")

        // $("#messageBox").html("亲，您的信息输入不全");
        return;
      }
      //2、用户名是否存在(后端验证)
      if (hasUser) {
        return;
        console.log("14")

      }

      $.post(
        // "addUser.php",
        "../../addUser.php",
        {
          "username": $("#username").val(),
          "userpass": $("#userpass").val()
        },
        function (data) {
          if (data == "﻿success") {
            console.log("15")

            // $("#messageBox").css({"color":"green"});
            // $("#messageBox").html("恭喜您，注册成功！2秒后跳转到<a href='login.html'>登录</a>页面");
            setTimeout(() => {
              // location.href="login.html";
              location.href = "http://127.0.0.1/goodsAndShoppingCart/lk/zhuce.html";
              console.log('成功')
            }, 2000);
          } else if (data == "﻿fail") {
            console.log('失败')

            // $("#messageBox").css({"color":"red"});
            // $("#messageBox").html("不好意思，注册失败!");
          } else {
            console.log('success')
            // $("#messageBox").css({"color":"red"});
            // $("#messageBox").html("不好意思，服务器出问题了!");
          }
        }
      );
    });
  });


</script>